<template>
  <div
    class="cover"
    :style="{
      width: `${width}px`,
      height: `${height}px`,
    }"
  >
    <template v-if="empty">
      <div class="cover-title">
        {{ title }}
      </div>
    </template>
    <img
      style="width: 100%; height: 100%"
      :src="cover"
    />
  </div>
</template>

<script setup>
const props = defineProps({
  width: {
    type: Number,
    default: 184,
  },
  height: {
    type: Number,
    default: 256,
  },
  cover: {
    type: String,
  },
  empty: {
    type: Boolean,
    value: false,
  },
  title: {
    type: String,
  },
});
</script>

<style lang="scss">
.cover {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0px 6px 12px 2px rgba(0, 0, 0, 0.16);
  flex-shrink: 0;
  position: relative;

  &-title {
    width: 100%;
    min-height: 30%;
    padding: 0 10%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    justify-content: center;

    position: absolute;
    top: 0;
    left: 0;
    font-size: 16px;
  }
}
</style>
